<template>
  <div class="ResetPopups">
    <div class="mask">
      <div class="fixedBox">
        <div class="content">
          <div class="top">
            <h3 class="title">重置默认</h3>
            <div class="close" @click="close">
              <i class="iconfont iconguanbi-01"></i>
            </div>
          </div>
          <div class="main">
            <div class="tip">
              <i class="iconfont iconjinggao"></i>
              <p>操作将把所有日期恢复默认，是否继续？</p>
            </div>
          </div>
          <div class="bottom">
            <Button class="popupsCancelBtn" @click="close">取消</Button>
            <Button type="info" class="popupsConfirmBtn" @click="confirm">确定</Button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "ResetPopups",
  methods: {
    // 确定
    confirm() {
      this.$emit("confirmResetPopups");
    },
    // 关闭弹窗
    close() {
      this.$emit("closeResetPopups");
    },
  },
};
</script>
<style lang="scss" scoped>
.ResetPopups {
  position: relative;
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background-color: rgba($color: #000000, $alpha: 0.5);
    .fixedBox {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 600px;
      height: 300px;
      background-color: #fff;
      .content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        .top {
          background-color: #f2f2f2;
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 48px;
          h3 {
            color: #333;
            font-size: 16px;
            text-indent: 20px;
            font-weight: normal;
          }
          .close {
            width: 64px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            i {
              color: #333;
              font-size: 24px;
            }
          }
          .close:hover {
            background-color: $red;
            i {
              color: #fff;
            }
          }
        }
        .main {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: flex-start;
          .tip {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin-top: 50px;
            i {
              margin-right: 5px;
              color: $red;
              font-size: 16px;
            }
            p {
              color: #333;
              font-size: 16px;
            }
          }
        }
        .bottom {
          height: 48px;
          background-color: #f2f2f2;
          display: flex;
          align-items: center;
          justify-content: flex-end;
        }
      }
    }
  }
}
</style>